<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no">
<link rel="stylesheet" href="//at.alicdn.com/t/font_342477_owwvl7ndgo.css?v=1.0.0">
<title>我的订单</title>
<link type="text/css" rel="stylesheet" href="/static/css/s.common.css">
<link type="text/css" rel="stylesheet" href="/static/css/s.agent.css">
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/layer_mobile/layer.js"></script>
<script type="text/javascript" src="http://oss.nawen1413.com/static/js/jquery.pjax.js?v=0.01"></script>
<script type="text/javascript" src="/static/js/common.js?v=0.01"></script>
<style type="text/css">
html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0}
html{font-size:50px}
body{ -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:32px;background-color:#f5f5f9 }
body{line-height:40px!important;font-size:26px!important}
body,body.g-init-echart{font-family:Microsoft YaHei,Helvetica!important;color:#2e3136;background:#f5f6f7!important;}
*, :after, :before {
    margin: 0;
    padding: 0;
    border: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -webkit-user-select: text!important;
    -moz-user-select: text!important;
    -ms-user-select: text!important;
    user-select: text!important;
}
*, :after, :before {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.am-tabs-ink-bar {
    position: absolute;
    bottom: 0;
    height: 4px;
    background-color: #108ee9;
}
.am-tabs-ink-bar-animated {
    -webkit-transition: -webkit-transform .3s cubic-bezier(.86,0,.07,1);
    transition: -webkit-transform .3s cubic-bezier(.86,0,.07,1);
    transition: transform .3s cubic-bezier(.86,0,.07,1);
    transition: transform .3s cubic-bezier(.86,0,.07,1),-webkit-transform .3s cubic-bezier(.86,0,.07,1);
}
.g-am-init ._line-animated, .g-am-init .am-tabs-ink-bar {
    background-color: #5c8dff!important;
    z-index: 1;
}

.c-share-back {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 200px;
    z-index: 9;
    padding-left: 50px;
}
.c-share-back .__content {
    float: left;
    width: 70px;
}
.c-share-back .__icon {
    float: right;
    border-radius: 100%;
    text-align: center;
    background: rgba(0,0,0,.5);
    line-height: 70px;
    height: 70px;
    width: 70px;
    margin-top: -70px;
    color: #fff;
    font-size: 50px;
}
.g-am-init .am-tabs-tab-active {
    color: #5c8dff!important;
}
.am-tabs-bar {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: relative;
}
.am-tabs-bar .am-tabs-tab {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-pack: center;
    border-bottom: 1px solid #ddd;
    font-size: 30px;
    height: 87px;
    line-height: 87px;
    color: #000;
    background-color: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.am-tabs-bar .am-tabs-tab-active {
    color: #108ee9;
}
.g-am-init .am-tabs-bar .am-tabs-tab {
    font-size: 26px!important;
}
.g-relative {
    position: relative!important;
}
.am-tabs-bar .am-tabs-nav-swipe-container .am-tabs-nav-swipe .am-tabs-nav .am-tabs-tab, .am-tabs-bar .am-tabs-tab {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.g-tabs {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.am-tabs-content {
    zoom: 1;
}
.am-tabs-content-animated {
    -webkit-transition: -webkit-transform .3s cubic-bezier(.86,0,.07,1);
    transition: -webkit-transform .3s cubic-bezier(.86,0,.07,1);
    transition: transform .3s cubic-bezier(.86,0,.07,1);
    transition: transform .3s cubic-bezier(.86,0,.07,1),-webkit-transform .3s cubic-bezier(.86,0,.07,1);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    will-change: transform;
}
.am-tabs-content .am-tabs-tabpane {
    background: none!important;
}
.am-tabs-content .am-tabs-tabpane {
    overflow: auto;
}
.am-tabs-content-animated .am-tabs-tabpane {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}
.am-search {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 88px;
    padding: 0 16px;
    background-color: #efeff4;
}
.am-search, .am-search-input {
    position: relative;
    overflow: hidden;
}
.am-search-input {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 100%;
    height: 56px;
    background-color: #fff;
    background-clip: padding-box;
    border-radius: 6px;
}
.am-search-input .am-search-synthetic-ph, .am-search-input input[type=search] {
    position: absolute;
    top: 0;
    left: 0;
}
.am-search-input .am-search-synthetic-ph {
    z-index: 1;
    height: 56px;
    line-height: 56px;
    width: 100%;
    -webkit-transition: width .3s;
    transition: width .3s;
    display: block;
    text-align: center;
}
button, input, optgroup, select, textarea {
    font-family: sans-serif;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}
button, input {
    overflow: visible;
}
[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}
.am-search-input .am-search-synthetic-ph, .am-search-input input[type=search] {
    position: absolute;
    top: 0;
    left: 0;
}
.am-search-input input[type=search] {
    z-index: 2;
    opacity: 0;
    width: 100%;
    text-align: left;
    display: block;
    color: #000;
    height: 56px;
    font-size: 30px;
    background-color: transparent;
    border: 0;
}
.am-search-input .am-search-clear{
position:absolute;display:none;z-index:3;width:30px;height:30px;padding:13px;border-radius:50%;top:0;right:0;background-color:transparent;background-position:50%;background-repeat:no-repeat;background-size:30px 30px;-webkit-transition:all .3s;transition:all .3s;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%23ccc'/%3E%3Cpath stroke='%23fff' stroke-width='2' stroke-miterlimit='10' d='M8 8l12 12'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-miterlimit='10' d='M20 8L8 20'/%3E%3C/svg%3E")}
.am-search-input .am-search-clear:active{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%23108ee9'/%3E%3Cpath stroke='%23fff' stroke-width='2' stroke-miterlimit='10' d='M8 8l12 12'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-miterlimit='10' d='M20 8L8 20'/%3E%3C/svg%3E")}
.am-search-input .am-search-clear-show{display:block}
.am-search-cancel{-webkit-box-flex:0;-webkit-flex:none;-ms-flex:none;flex:none;opacity:0;padding-left:16px;height:88px;line-height:88px;font-size:32px;color:#108ee9;text-align:right}.am-search-cancel-anim{-webkit-transition:margin-right .3s,opacity .3s;transition:margin-right .3s,opacity .3s;-webkit-transition-delay:.1s;transition-delay:.1s}.am-search-cancel-show{opacity:1}.am-search.am-search-start .am-search-input input[type=search]{opacity:1;padding-left:70px}.am-search.am-search-start .am-search-input input[type=search]::-webkit-input-placeholder{color:transparent}.am-search.am-search-start .am-search-input input[type=search]::-ms-input-placeholder{color:transparent}.am-search.am-search-start .am-search-input input[type=search]::placeholder{color:transparent}.am-search.am-search-start .am-search-input .am-search-synthetic-ph{padding-left:30px;width:auto}</style><style type="text/css">.hairline-remove-right-bottom{border-bottom:0}.hairline-remove-left-top:before,.hairline-remove-right-bottom-bak:after,.hairline-remove-right-bottom:after{display:none}.am-carousel{position:relative}.am-carousel-wrap{font-size:36px;color:#000;background:none;text-align:center;zoom:1;width:100%}.am-carousel-wrap-dot{display:inline-block;zoom:1}.am-carousel-wrap-dot>span{display:block;width:16px;height:16px;margin:0 6px;border-radius:50%;background:#ccc}.am-carousel-wrap-dot-active>span{background:#888}
.g-black-light {
    color: #9c9fa6!important;
}
.g-am-init .am-tabs-bar .am-tabs-tab{ border-bottom:0px solid #ffffff; }
.g-am-init .am-tabs-bar .am-tabs-tab-active{ border-color: #5c8dff; }

.layui-m-layer2 .layui-m-layercont i{ background:#5c8dff; }
</style>

</head>
<body>

<div id="pages">
    <div>
        <div>
            <div class="g-am-init g-reset">
                <div class="am-tabs am-tabs-top">
                    <div role="tablist" class="am-tabs-bar" tabindex="0">
					
                        <div class="am-tabs-ink-bar am-tabs-ink-bar-animated" style="display: none;  width: 146px;"></div>
						
						{volist name='$orderstatus' id='v'}
                        <div role="tab" data-status="{$v.status}" class="{if condition="$v.status eq $search.status"}am-tabs-tab-active0{/if} am-tabs-tab">
                            <div class="g-tabs g-relative">
                                <div>{$v.name}</div>
								{if condition="$v.StatusNum gt 0"}
								<div class="g-absolute" style="display: block; height: 30px; width: 30px; top: 42px; left: 60px; background: rgb(246, 111, 98); border-radius: 15px; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 20px; line-height: 30px; font-family: &quot;&quot;; color: white; z-index: 20;">{$v.StatusNum}</div>
								{/if}
							</div>
                        </div>
						{/volist}
						
                    </div>
                    <div class="am-tabs-content am-tabs-content-animated" style="transform: translateX(0%) translateZ(0px);">
                        <div role="tabpanel" class="am-tabs-tabpane am-tabs-tabpane-active">
						
							<!--form-->
                            <div class="g-flex g-search-box" style="background: rgb(239, 239, 244);">
								<div class='am-search g-col'>
									<div class="am-search-input">
										<div class="am-search-synthetic-ph" style="width: 100%;">
											<span class="am-search-synthetic-ph-container">
												<i class="am-search-synthetic-ph-icon"></i>
												<span class="am-search-synthetic-ph-placeholder" style="visibility: visible;">订单号/姓名/电话/商品名称</span>
											</span>
										</div>
										<input type="search" class="am-search-value" autocomplete="off" value="" placeholder="订单号/姓名/电话/商品名称">
										<a class="am-search-clear"></a>
									</div>
								</div>
								<div class="am-search-cancel" style="margin-right: -80px;">搜索</div>
                                <span class="iconfont icon-xq- g-fs-40 g-black-light" style="line-height: 88px; margin-left: 14px; padding-right: 30px;"></span>
                            </div>
							<!--/form-->
							
                            <div class="common-pull-scroll pull-view-wrap scroll-container-0" style=" padding-bottom: 50px;">
                                <div class="_dropload _pull" style="transform: translateY(0px);">
                                    <div class="_status">
                                        <div></div>
                                    </div>
                                </div>
								
								{notempty name='orderinfo'}
                                <div style="transform: translateY(0px);">
                                    <div>
                                        <div>
											{volist name='orderinfo' id='v'}
                                            <a class="g-reset g-flex g-fd-c g-bg-white g-m-b" data-id="{$v.OrderID}" href="{:url('Order/detail',['id'=>$v.OrderID])}">
                                                <div>
                                                    <div class="g-flex g-jc-sb g-bb g-pd">
                                                        <div>订单编号：{$v.OrderID}</div>
                                                        <div class="g-blue-middle" style="color: rgb(92, 141, 255);">{$v.Status|__order_status}</div></div>
                                                </div>
                                                <div>
													{volist name='$v.Product' id='y'}
                                                    <div>
                                                        <div class="g-flex g-pd g-bb">
                                                            <img src="{$y.MainImg}" alt="" class="g-img-140">
                                                            <div class="g-flex g-fd-c g-col g-pd-lr g-jc-sb">
                                                                <div class="g-twoline g-fs-30">{$y.ProductName}</div>
                                                                <small class="g-black-light">
                                                                    <span></span>
                                                                </small>
                                                                <div class="g-flex g-jc-sb">
                                                                    <div class="g-orange-dark">￥{$y.ProductPrice}</div>
                                                                    <span class="g-black-middle">x{$y.ProductVol}</span></div>
                                                            </div>
                                                        </div>
                                                    </div>
													{/volist}
                                                   
                                                    <div class="g-bb g-pd g-flex g-fd-rr">
                                                        <div class="g-orange-dark">总计：￥{$v.Amount}</div>
                                                        <div class="g-col"></div>
                                                    </div>
                                                </div>
                                                <div class="common-order-popover">
                                                    <div class="g-row g-pd-tb g-pd-lr">
                                                        <div class="g-flex g-jc-sb g-ai-c">
                                                            <div class="__target" style="width: 10vw; position: relative;">
                                                                <div class="__top">
                                                                    <div class="__triangle" style="display: none;"></div>
                                                                    <div class="__popover" style="display: none;"></div>
                                                                </div>
                                                            </div>
                                                            <div class="g-row" style="width: 86vw;">
																<!--
                                                                <div class="g-btn-edit active g-m-r g-fr" data-action="again">再次购买</div>
                                                                <div class="g-btn-edit g-m-r g-fr" data-action="delete">删除订单</div>
																-->
																{$v.Status|__order_status_btns}
															</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
											{/volist}
                                        </div>
                                    </div>
                                </div>
								
                                <div class="_dropload _scroll" style="transform: translateY(0px);">
                                    <div class="_status">
                                        <div>
                                            <span>已全部加载</span>
										</div>
                                    </div>
                                </div>
								
								{else /}
								<div style="transform: translateY(0px);">
									<div class="g-tc" style="margin-top: 25%;">
										<img src="//oss.nawen1413.com/images/empty_state.png" alt="" class="g-m-b">
									</div>
								</div>

								<div class="_dropload _scroll" style="transform: translateY(0px);">
									<div class="_status">
										<span class="g-fs-26">没有内容可供显示</span>
									</div>
								</div>
								{/notempty}
                            </div>
                        </div>
						
                        <div role="tabpanel" class="am-tabs-tabpane am-tabs-tabpane-inactive">
						</div>
                        <div role="tabpanel" class="am-tabs-tabpane am-tabs-tabpane-inactive">3333</div>
                        <div role="tabpanel" class="am-tabs-tabpane am-tabs-tabpane-inactive">4444</div>
                        <div role="tabpanel" class="am-tabs-tabpane am-tabs-tabpane-inactive">5555</div>
                    </div>
                </div>
            </div>
			
            <div class="c-share-back" data-func="abcd">
                <div class="__content">
                    <i class="iconfont icon-goback __icon"></i>
                </div>
            </div>
			
        </div>
    </div>
</div>

<script>

function abc(){
	alert('www');
}

var __NavIndex = 0;

var __SearchArr = [
	
];

var search = {
	status : {$search.status},
	key : "{$search.key}",
	page : {$search.page},
	navIndex : 0 
};

//设置主导航热点显示状态，并处理订单列表
function setNavActive(){
	let navWidth = $(window).width() / $("[role='tab']").length;
	$('.am-tabs-ink-bar-animated').css('width',navWidth).css('display','block');
	$("[role='tab']").each(function(index){
		if(parseInt($(this).attr('data-status')) == search.status){
			search.navIndex = index;
			$(this).addClass('am-tabs-tab-active');//蓝色文字
			let x = index * navWidth;
			$('.am-tabs-ink-bar-animated').css('transform','translateX('+x+'px)'); //热点底纹定位
		}else{
			$(this).removeClass('am-tabs-tab-active');
		}
	});
	//切换数据tab
	let x = 0 - search.navIndex * 100;
	let boxWidth = $('.am-tabs-content').css('transform','translateX('+x+'%)');
	$(".am-tabs-content").find(".am-tabs-tabpane").each(function(index){
		if(index == search.navIndex){
			$(this).removeClass('am-tabs-tabpane-inactive').addClass('am-tabs-tabpane-active');
		}else{
			$(this).removeClass('am-tabs-tabpane-active').addClass('am-tabs-tabpane-inactive');
		}
	});
	
	loadList();
}
//载入当前状态下的数据
function loadList(){
	let iii = layer.open({type:2,shade:false});
		$.ajax({
			url : "{:url('Order/order_loadpage')}",
			type : "POST",
			dataType : "html",
			data : search,
			success : function(e){
				layer.close(iii);
				
				console.log(e);
				
			},error : function(){
			},complete : function(){
				layer.close(iii);
				search.page++;
			}
		});
}

$(function(){
	
	setNavActive();

	//状态切换
	$("[role='tablist']").find("[role='tab']").each(function(navIndex){
		$(this).click(function(){
			search.page = 1;
			search.status = parseInt($(this).attr('data-status'));
			setNavActive();
			
		});
	});
	//计算主体高度
	let _mh = $(window).height() - $('.g-search-box').outerHeight() - $('.am-tabs-bar').outerHeight();
	console.log(_mh);
	$('.scroll-container-0').css('min-height',_mh).css('height',_mh);
	
	//订单状态按钮
	$('.order-status-btn').click(function(event){
		//event.stopPropagation();
		let action = $(this).attr('data-action');
		order_status_btn_do($(this).parents('a').attr('data-id'),action);
		return false;
	});
});
function order_status_btn_do(orderid,action){
	if(action =='quxiao'){
		//取消订单
		$.post("{:url('Order/cancel')}",{'orderid':orderid},function(e){
			alert(e.info);
		},'JSON');
	}else if(action =='zhifu'){
		//去支付
		location.href= "{:url('Order/pay')}?orderid="+orderid;
	}else if(action =='chedan'){
		//去撤单
		location.href= "{:url('Order/applycancel')}?orderid="+orderid;
	}else if(action =='shouhuo'){
		//收货
		$.post("{:url('Order/receipt')}",{'orderid':orderid},function(e){
			alert(e.info);
		},'JSON');
	}else if(action == 'pinzheng'){
		//查看凭证
		location.href = "{:url('Order/checkrep')}?orderid="+orderid;
	}
}
</script>

</body>
</html>